<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!-- 1.双列表互选  -->
<!-- ​		1.点击表头全选和全不选
​		2.点击中间右箭头》将列表一选中的移到右边的列表
​		  点击中间的左箭头《 将列表二选中的移到左边表一 -->

<body>
   <div id="div1">
      <div id="l1"><input type="checkbox" value="" onclick="qx()">列表一</div>
      <div id="cbxall">
        <input type="checkbox" value="" name="b">备选项1<br>
        <input type="checkbox" value="" name="b">备选项2<br>
        <input type="checkbox" value="" name="b">备选项3<br>
        <input type="checkbox" value="" name="b">备选项4<br>
        <input type="checkbox" value="" name="b">备选项5<br>
        <input type="checkbox" value="" name="b">备选项6<br>
        <input type="checkbox" value="" name="b">备选项7<br>
        <input type="checkbox" value="" name="b">备选项8<br>
        <input type="checkbox" value="" name="b">备选项9<br>
        <input type="checkbox" value="" name="b">备选项10<br>
      </div>
      
   </div> 
   <button id="bthleft" onclick="fun()"><</button>
   <button id="bthright" onclick="dun()"> > </button>
   <div id="div2">

    <div id="l2"><input type="checkbox">列表二
    </div>


</div> 
     <style>
       #div1{
        border: 1px solid #9999;
        width: 200px; 
        height: 500px; 
        float: left; 
        margin: auto;
       }
       #l1{
           width: 200px;
        font-size: 20px;
         background-color: rgba(222, 213, 213, 0.6)
       }
       #bthleft,#bthright{
        width: 50px;
         height: 50px;
          background-color: cornflowerblue;color:white;
          font-size: 30px;
           border-radius: 50px;
            border: none;
             float: left;
             margin-top: 200px;
       }
       #div2{
        border: 1px solid #9999;
        width: 200px; 
        height: 500px; 
        float: left; 
        margin: auto;
       }
       #l2{
           width: 200px;
        font-size: 20px;
         background-color: rgba(222, 213, 213, 0.6)
       }
     </style>
</body>
<script>
    
     function qx(){
      var qx = []
        var a = document.getElementsByName('b')
        for(var i = 0; i < a.length; i++){
          if(a[i].checked = true){
              qx+=a[i].value
          }
        }
     }
     function fun(){
       var b =a[i].value
       console.log(b);
       document.getElementById('div2').value = qx
     }
</script>
</html>
